<template>
    <div class="app-container" v-loading="loading" element-loading-text="加载中">
        <el-table :data="tableData" style="width: 100%" :stripe="true">
            <el-table-column prop="name" label="用户名称">
            </el-table-column>
            <el-table-column prop="body_number" label="仪器型号">
            </el-table-column>
            <el-table-column prop="serial_number" label="序列号">
            </el-table-column>
            <el-table-column prop="in_time" label="入库时间">
            </el-table-column>
            <el-table-column prop="out_time" label="出库时间">
            </el-table-column>
            <el-table-column prop="equipment_source" label="设备来源">
            </el-table-column>
            <el-table-column prop="address" label="用户地址">
            </el-table-column>
            <el-table-column prop="contact" label="联系方式">
            </el-table-column>
            <el-table-column prop="sales_methods" label="销售方式">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-row>
                        <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                    </el-row>
                    <el-row>
                        <el-button type="danger" size="small" @click="handleDelete(scope.$index)">删除</el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :fullscreen="true" :visible.sync="dialogVisible" title="编辑" :close-on-click-modal="false">
            <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="80px">
                <el-form-item label="用户名称" prop="name">
                    <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="仪器型号" prop="body_number">
                    <el-input v-model="editForm.body_number"></el-input>
                </el-form-item>
                <el-form-item label="序列号" prop="serial_number">
                    <el-input v-model="editForm.serial_number"></el-input>
                </el-form-item>
                <el-form-item label="入库时间" prop="in_time">
                    <el-input v-model="editForm.in_time"></el-input>
                </el-form-item>
                <el-form-item label="出库时间" prop="out_time">
                    <el-input v-model="editForm.out_time"></el-input>
                </el-form-item>
                <el-form-item label="设备来源" prop="equipment_source">
                    <el-input v-model="editForm.equipment_source"></el-input>
                </el-form-item>
                <el-form-item label="用户地址" prop="address">
                    <el-input v-model="editForm.address"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="contact">
                    <el-input v-model="editForm.contact"></el-input>
                </el-form-item>
                <el-form-item label="销售方式" prop="sales_methods">
                    <el-select v-model="editForm.sales_methods" placeholder="销售方式">
                        <el-option v-for="item in salesMethods" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveEdit">保存</el-button>
            </div>
        </el-dialog>

        <el-dialog :fullscreen="true" :visible.sync="addDialogVisible" title="添加客户" :close-on-click-modal="false">
            <el-form :model="addForm" :rules="addFormRules" ref="addForm" label-width="80px">
                <el-form-item label="用户名称" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="仪器型号" prop="body_number">
                    <el-input v-model="addForm.body_number"></el-input>
                </el-form-item>
                <el-form-item label="序列号" prop="serial_number">
                    <el-input v-model="addForm.serial_number"></el-input>
                </el-form-item>
                <el-form-item label="入库时间" prop="in_time">
                    <el-input v-model="addForm.in_time"></el-input>
                </el-form-item>
                <el-form-item label="出库时间" prop="out_time">
                    <el-input v-model="addForm.out_time"></el-input>
                </el-form-item>
                <el-form-item label="设备来源" prop="equipment_source">
                    <el-input v-model="addForm.equipment_source"></el-input>
                </el-form-item>
                <el-form-item label="用户地址" prop="address">
                    <el-input v-model="addForm.address"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="contact">
                    <el-input v-model="addForm.contact"></el-input>
                </el-form-item>
                <el-select v-model="addForm.sales_methods" placeholder="销售方式">
                    <el-option v-for="item in salesMethods" :key="item" :label="item" :value="item">
                    </el-option>
                </el-select>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveAdd">添加</el-button>
            </div>
        </el-dialog>
        <el-button style="margin-top: 20px;" type="primary" @click="addDialogVisible = true">添加客户</el-button>

    </div>
</template>

<script>
import Api from '../../api/api'
export default {
    data() {
        return {
            loading:false,
            tableData: [],
            salesMethods:['直销','代理'],
            dialogVisible: false,
            addDialogVisible: false,
            editFormIndex: 0,
            editForm: {
                name: '医院',
                body_number: 'sk',
                serial_number:'01',
                in_time: ' ',
                out_time: ' ',
                equipment_source: '艾德康',
                address: '',
                contact: ''
            },
            addForm: {
                name: '医院',
                body_number: 'sk',
                serial_number:'01',
                in_time: new Date().toLocaleDateString(),// 获取当前日期,
                out_time: new Date().toLocaleDateString(),// 获取当前日期,
                equipment_source: '艾德康',
                address: '',
                contact: ''
            },
            editFormRules: {
                name: [{
                    required: true,
                    message: '用户名称',
                    trigger: 'blur'
                }],
                body_number: [{
                    required: true,
                    message: '仪器型号',
                    trigger: 'blur'
                }],
                serial_number: [{
                    required: true,
                    message: '序列号',
                    trigger: 'blur'
                }],
                in_time: [{
                    required: true,
                    message: '入库时间',
                    trigger: 'blur'
                }],
                out_time: [{
                    required: true,
                    message: '出库时间',
                    trigger: 'blur'
                }],
                equipment_source: [{
                    required: true,
                    message: '设备来源',
                    trigger: 'blur'
                }],
                address: [{
                    required: true,
                    message: '用户地址',
                    trigger: 'blur'
                }],
                contact: [{
                    required: true,
                    message: '联系方式',
                    trigger: 'blur'
                }]
            },
            addFormRules: {
                name: [{
                    required: true,
                    message: '用户名称',
                    trigger: 'blur'
                }],
                body_number: [{
                    required: true,
                    message: '仪器型号',
                    trigger: 'blur'
                }],
                serial_number: [{
                    required: true,
                    message: '序列号',
                    trigger: 'blur'
                }],
                in_time: [{
                    required: true,
                    message: '入库时间',
                    trigger: 'blur'
                }],
                out_time: [{
                    required: true,
                    message: '出库时间',
                    trigger: 'blur'
                }],
                equipment_source: [{
                    required: true,
                    message: '设备来源',
                    trigger: 'blur'
                }],
                address: [{
                    required: true,
                    message: '用户地址',
                    trigger: 'blur'
                }],
                contact: [{
                    required: true,
                    message: '联系方式',
                    trigger: 'blur'
                }]
            }
        };
    },
    methods: {
        onLoad() {
            this.loading = true
            Api.getCustomers({limit:1000}).then(response => {
                this.tableData = response.data.data
                console.log(response.data)
                this.loading = false
            })
        },
        handleEdit(index, row) {
            this.editForm = Object.assign({}, row);
            this.editFormIndex = index;
            this.dialogVisible = true;
        },
        saveEdit() {
            this.$refs.editForm.validate(valid => {
                if (valid) {
                    console.log(this.editForm)
					console.log(this.editFormIndex)
					console.log(this.tableData[this.editFormIndex])
					let date = this.tableData[this.editFormIndex]
					Api.updaCustomers({id:date._id,date:this.editForm}).then(response => {
						console.log(response.data)
						if(response.status==200){
							Object.assign(this.tableData[this.editFormIndex], this.editForm);
							this.dialogVisible = false;
						}
						this.$message.success(response.data.message);
					})
                }
            });
        },
        handleDelete(index) {
            this.$confirm('确认删除此人员？')
                .then(_ => {
					let date = this.tableData[index]
					console.log(date)
					Api.delCustomers({id:date._id}).then(response => {
						console.log(response.data)
						if(response.status==200){
							this.tableData.splice(index, 1);
							
						}
						this.$message.success(response.data.message);
					})
                })
                .catch(_ => { });
        },
        saveAdd() {
            this.$refs.addForm.validate(valid => {
                if (valid) {
                    Api.createCustomer(this.addForm).then(response => {
						console.log(response.data)
						if(response.status==200){
                            this.tableData.push({ ...response.data.data});
							this.addForm = {...response.data.data}
							delete this.addForm._id
							this.addDialogVisible = false;
							
						}
						this.$message.success(response.data.message);
						
					})
                }
            });
        }
    }
};
</script>
<style>
.app-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
</style>
